<!DOCTYPE HTML>

<html lang="pt-br"  
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	
<ui:composition template="/WEB-INF/template/VendaTemplate.xhtml">
<ui:define name="corpo">
<style type="text/css">
	.div-tela 
	{
		max-width: auto;
		max-height: auto;
		padding: 10px 10px 10px;
	    margin: 0 auto 20px;
	    background-color: #fff;
	    border: 1px solid #e5e5e5;
	    -webkit-border-radius: 5px;
	    	-moz-border-radius: 5px;
	        	border-radius: 5px;
	    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
	    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
	        	box-shadow: 0 1px 2px rgba(0,0,0,.05);
	}
	.colunaEsquerda
	{  
	    text-align: left;
	    width: 20%;  
	}  
	.colunaDireita
	{  
	    text-align: left;
	    width: 80%    
	}
	.colunaEsquerdaDetalhe
	{  
	    text-align: left;
	    width: 60%;  
	}  
	.colunaDireitaDetalhe
	{  
	    text-align: left;
	    width: 40%    
	}
	.modal
	{
		font-size: 12px;
	}
	</style>
<div class="div-tela">
	<p:panel id="pnlPromocaoProduto" header="Promoções de Produtos">
	
		<p:commandButton id="btnCarregar"
						styleClass="ui-priority-primary"
			        	value="Carregar Promoções"
			        	update=":frmVenda:pnlPromocaoProduto"
			        	actionListener="#{promocaoManagerBean.carregarPromocoes}"/>
			        	
		<p:commandButton id="btnSair" 
						value="Sair" 
						styleClass="ui-priority-primary"
						actionListener="#{promocaoManagerBean.sair}"/>
		
		<div>
		<BR />
		</div>
	
		<p:dataTable id="tblPromocao" 
					var="promocao" 
					value="#{promocaoManagerBean.listaPromocoes}"
					scrollable="true"
					scrollHeight="auto"
					emptyMessage="Sem Dados para Exibição">
						
			<p:column style="width:5%;background-color:#FFFFFF;">
            	<p:rowToggler />
        	</p:column>
        		
        	<p:column headerText="Data Cadastro" width="10%">
		    	<h:outputText value="#{promocao.dataCadastro}" >
		        	<f:convertDateTime pattern="dd/MM/yyyy"/>
		        </h:outputText>
		    </p:column>
        		
        	<p:column headerText="Data Validade" width="10%">
		    	<h:outputText value="#{promocao.dataValidade}" >
		        	<f:convertDateTime pattern="dd/MM/yyyy"/>
		        </h:outputText>
		    </p:column>
        		
        	<p:column headerText="Título" width="25%">
				<h:outputText value="#{promocao.titulo}" />
		    </p:column>		
		        
		    <p:column headerText="Tipo" width="20%">
				<h:outputText value="#{promocao.promocaoTipoVo.descricao}" />
		    </p:column>
		        
		    <p:column headerText="Premiação" width="20%">
				<h:outputText value="#{promocao.promocaoPremiacaoVo.descricao}" />
		    </p:column>
		        
		    <p:column headerText="Ações" width="10%">
		        <p:commandButton value="Detalhar" 
		       				 	update=":frmVenda:pnlDetalhe"
		        				styleClass="ui-priority-primary"
		        				actionListener="#{promocaoManagerBean.carregarDetalhePromocao(promocao)}"/>
		    </p:column>
		        
		    <p:rowExpansion>
            	<p:dataTable id="tblPromocaoDetalhe" 
							var="promocaoDetalhe" 
							value="#{promocao.listaProdutosPromocao}"
							emptyMessage="Sem Dados para Exibição">
						
						<p:column headerText="Código" width="10%">
				            <h:outputText value="#{promocaoDetalhe.produtoGiroDetalheVo.idCodigoEptus}" />
		        		</p:column>
						
						<p:column headerText="Produto" width="50%">
				            <h:outputText value="#{promocaoDetalhe.produtoGiroDetalheVo.descricao}" />
		        		</p:column>
		        		
		        		<p:column headerText="Fabricante" width="30%">
				            <h:outputText value="#{promocaoDetalhe.produtoGiroDetalheVo.fabricanteVo.descricao}" />
		        		</p:column>
		        		
		        		<p:column headerText="Qtd Disponível" width="10%">
				            <h:outputText value="#{promocaoDetalhe.produtoGiroDetalheVo.quantidadeDisponivel}" />
		        		</p:column>
		        		
				</p:dataTable>
        	</p:rowExpansion>
		        
    	</p:dataTable>
	
    </p:panel>	
</div>
</ui:define>
<ui:define name="modal">
		<p:dialog id="modalDetalhe"
			widgetVar="diagDetalhe" 
			header="Detalhes da Promoção"
			modal="true"
			resizable="false"
			width="980"
			position="top">
		<p:panel id="pnlDetalhe" style="width:100%; font-size:11px;">
			<p:panelGrid columns="2" columnClasses="colunaEsquerda, colunaDireita" style="width:100%; border:none;" >
			
				<h:outputLabel value="Título" for="txtTitulo"/>
				<h:outputText id="txtTitulo" value="#{promocaoManagerBean.promocaoVo.titulo}"/>
				
				<h:outputLabel value="Observação" for="txtObservacao"/>
				<p:inputTextarea id="txtObservacao"
									rows="5"
									cols="62"
									minQueryLength="4"
									queryDelay="750"
									readonly="true"
									value="#{promocaoManagerBean.promocaoVo.observacao}"/>
			
				<h:outputLabel value="Data Cadastro" for="txtDataCadastro"/>
				<h:outputText id="txtDataCadastro" value="#{promocaoManagerBean.promocaoVo.dataCadastro}" >
		        	<f:convertDateTime pattern="dd/MM/yyyy"/>
		        </h:outputText>
		        
		        <h:outputLabel value="Data Validade" for="txtDataValidade"/>
				<h:outputText id="txtDataValidade" value="#{promocaoManagerBean.promocaoVo.dataValidade}" >
		        	<f:convertDateTime pattern="dd/MM/yyyy"/>
		        </h:outputText>
		        
		        <h:outputLabel value="Tipo Promoção" for="txtTipoPromocao"/>
				<h:outputText id="txtTipoPromocao" value="#{promocaoManagerBean.promocaoVo.promocaoTipoVo.descricao}"/>
				
				<h:outputLabel value="Premiação" for="txtPremiacao"/>
				<h:outputText id="txtPremiacao" value="#{promocaoManagerBean.promocaoVo.promocaoPremiacaoVo.descricao}"/>
				
			</p:panelGrid>
			
			<div>
				<BR />
			</div>
			
			<p:dataTable id="tblPromocaoProdutoDetalhe" 
							var="promocaoProdutoDetalhe" 
							value="#{promocaoManagerBean.promocaoVo.listaProdutosPromocao}"
							emptyMessage="Sem Dados para Exibição"
							scrollable="true"
							scrollHeight="200"
							style="font-size:11px;">
						
						<p:column headerText="Código" width="10%">
				            <h:outputText value="#{promocaoProdutoDetalhe.produtoGiroDetalheVo.idCodigoEptus}" />
		        		</p:column>
						
						<p:column headerText="Produto" width="50%">
				            <h:outputText value="#{promocaoProdutoDetalhe.produtoGiroDetalheVo.descricao}" />
		        		</p:column>
		        		
		        		<p:column headerText="Fabricante" width="30%">
				            <h:outputText value="#{promocaoProdutoDetalhe.produtoGiroDetalheVo.fabricanteVo.descricao}" />
		        		</p:column>
		        		
		        		<p:column headerText="Disponível" width="10%">
				            <h:outputText value="#{promocaoProdutoDetalhe.produtoGiroDetalheVo.quantidadeDisponivel}" />
		        		</p:column>
		        		
			</p:dataTable>
			
		</p:panel>
				
	</p:dialog>	
			
</ui:define>

</ui:composition>
</html>